<template>
	<view>
		<!-- :style="pusherCalss" -->
		<live-pusher id="livePusher" ref="livePusher"  class="livePusher" :url="tl_url" mode="FHD"
			:muted="false" :enable-camera="true" :auto-focus="true" :beauty="1" whiteness="2" aspect="9:16"
			@statechange="statechange" @netstatus="netstatus" @error="error"></live-pusher>
<!-- 			<button type="primary" class="cu-btn" @click="saveForm">开始直播</button>
			<button type="primary" class="cu-btn" @click="downcast">关闭直播</button>
			<button class="btn" @click="pause">暂停推流</button>
			<button class="btn" @click="resume">resume</button>
		 <button class="btn" @click="stopPreview">关闭摄像头预览</button>
		 <button class="btn" @click="startPreview">开启摄像头预览</button>
			<button class="btn" @click="switchCamera">切换摄像头</button>
			<button type="primary" class="cu-btn" @click="switchCamera">切换摄像头</button> -->
			<view class="w-1 fr-a-c m-t-30">
				<view class="fl-c btn-outer" @click="saveForm">
					<u-icon size="50" name="play-right-fill"></u-icon>
					<text>{{startState?'直播中':'开始直播'}}</text>
				</view>
				<!-- <view class="fl-c btn-outer">
					<u-icon size="50" name="pause"></u-icon>
					<text>暂停直播</text>
				</view> -->
				<view class="fl-c btn-outer" @click="switchCamera">
					<u-icon size="50" name="reload"></u-icon>
					<text>切换摄像头</text>
				</view>
				<view class="fl-c btn-outer" @click="downcast">
					<u-icon size="50" name="close"></u-icon>
					<text>结束直播</text>
				</view>
			</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id:0,   // 直播间id
				// 视频宽高
				// pusherCalss: {
				// 	width: '750rpx',
				// 	height: '300px'
				// },
				// form本人测试请求的参数，不发请求可以不加
				form: {
					liveroomTitle: null, // 标题
					equipmentType: 1 // 设备类型（1.手机 2.电脑）
				},
				// 控制开启，关闭直播按钮的显示
				startState: false, // 直播状态（false 关闭）
				chapter_id: 0,
				tl_url: '',
				context: '',
			}
		},
		onLoad(e) {
			this.id = e.id
			this.getInfo()
			// this.pusherCalss.width = uni.getSystemInfoSync().windowWidth;
			// this.pusherCalss.height = uni.getSystemInfoSync().windowHeight;
		},
		onReady() {
			this.context = uni.createLivePusherContext('livePusher', this);
		},
		mounted() {
			// 一进页面，先调用摄像头，保证摄像头是打开状态，不加也可以，手动开启，参考上面官方给出的那些按钮
			// this.startPreview();
		},
		methods: {
			getInfo() {
				this.$get({
					url: '/homepage/getLivesDetail',
					data: {
						id: this.id
					}
				}).then(res => {
					this.info = res.lives
					this.tl_url = res.lives.push_url
				})
			},
			// 下面的这些方法，可以参考官网，具体查看每个方法的意义
			statechange(e) {
				console.log('statechange:' + JSON.stringify(e));
			},
			netstatus(e) {
				console.log('netstatus:' + JSON.stringify(e));
			},
			error(e) {
				console.log('error:' + JSON.stringify(e));
			},
			start: function() {
				this.context.start({
					success: a => {
						console.log('livePusher.start:' + JSON.stringify(a));
					},
					fail: err => {
						console.log(err, '失败了，失败了')
					}
				});
			},
			close: function() {
				this.context.close({
					success: a => {
						console.log('livePusher.close:' + JSON.stringify(a));
					}
				});
			},
			snapshot: function() {
				this.context.snapshot({
					success: e => {
						console.log(JSON.stringify(e));
					}
				});
			},
			resume: function() {
				this.context.resume({
					success: a => {
						console.log('livePusher.resume:' + JSON.stringify(a));
					}
				});
			},
			pause: function() {
				this.context.pause({
					success: a => {
						console.log('livePusher.pause:' + JSON.stringify(a));
					}
				});
			},
			stop: function() {
				this.context.stop({
					success: a => {
						this.startState = false;
						console.log(JSON.stringify(a));
					}
				});
			},
			switchCamera: function() {
				this.context.switchCamera({
					success: a => {
						console.log('livePusher.switchCamera:' + JSON.stringify(a));
					},
					fail: err => {
						console.log(err, 'rrrrrrr')
					}
				});
			},
			startPreview: function() {
				this.context.startPreview({
					success: a => {
						console.log('livePusher.startPreview:' + JSON.stringify(a));
					}
				});
			},
			stopPreview: function() {
				this.context.stopPreview({
					success: a => {
						console.log('livePusher.stopPreview:' + JSON.stringify(a));
					}
				});
			},
			// 输入框改变（没有接口可以忽略，这里就是发送请求时起一个直播间的名字）
			changeInput: function(e, name) {
				this.form[name] = e.detail.value;
			},
			// 开始直播
			saveForm() {
				if(!this.startState){
					uni.showModal({
						title: '提示',
						content: '确定要开始直播吗？',
						success: (res) => {
							if (res.confirm) {
								this.startState = true
								this.start()
							}
						}
					})
				}
			},
			// 关闭直播
			downcast() {
				uni.showModal({
					title: '提示',
					content: '确定要结束直播吗？',
					success: (res) => {
						if (res.confirm) {
							this.stopPreview()
							this.stop();
							this.startState = false
							uni.showToast({
								title: '直播已关闭',
								mask: true
							})
							// setTimeout(() => {
							// 	uni.navigateBack()
							// }, 1500)
						}
					}
				})

				// 同样，用不到接口只简单测试，调用this.stop();
				// vue的工具类等调用是this.$util；
				// uniapp使用getApp().$util
				// getApp().$util.requestUrl(`/test/live/downcast?anchorId=2`).then(res => {
				//     console.log(res)
				//     if (res.status == 200) {
				//         this.stop();
				//     }
				// });
			}
		}
	}
</script>

<style>
	page{
		background: #000000;
	}
	.livePusher{
		width: 100%;
		height: calc(100vh - 220rpx);
	}
	.btn-outer{
		width: 150rpx;
		height: 150rpx;
		border-radius: 50%;
		border: 2rpx solid #ffffff;
		color: #ffffff;
	}
</style>
